<template>
	<om-page :title="pageTitle">
		<view class="om_hd">
			<view style="display: flex;align-items:center;justify-content: center;">
				<om-avatar :avatarColor="logoColor" :text="firstName"></om-avatar>
				<text class="padding-left-sm">{{ middleName }}</text>
			</view>
		</view>
		<view class="page__bd" style="margin-top:95rpx;">
			<uni-card style="border: none;border-radius: 2rpx;" is-full title="联系方式">
				<uni-list>
					<uni-list-item :showLine="false" @click="makeCall(item.mobile)" :showArrow="false">
						<view class="tui-flex">
							<view class="tui-right  tui-col-4 om-label">私人手机</view>
							<view class="tui-center  tui-col-7 om-content">{{ item.mobile || '' }}</view>
							<view class="tui-right  tui-col-1"><tui-icon color="green" :size="20" name="mobile"></tui-icon></view>
						</view>
					</uni-list-item>
					<uni-list-item :showLine="false" @click="makeCall(item.shortNo)" :showArrow="false">
						<view class="tui-flex">
							<view class="tui-right tui-col-4 om-label">私人手机短号</view>
							<view class="tui-center  tui-col-7 om-content">{{ item.shortNo || '' }}</view>
							<view class="tui-right  tui-col-1"><tui-icon color="green" :size="20" name="mobile"></tui-icon></view>
						</view>
					</uni-list-item>
				</uni-list>
				<om-white-space size="large" />
				<om-white-space size="large" />
				<uni-list v-if="item.workMobile">
					<uni-list-item :showLine="false" @click="makeCall(item.workMobile)" :showArrow="false">
						<view class="tui-flex">
							<view class="tui-right  tui-col-4 om-label">工作手机</view>
							<view class="tui-center n tui-col-7 om-content">{{ item.workMobile || '' }}</view>
							<view class="tui-right  tui-col-1"><tui-icon color="green" :size="20" name="mobile"></tui-icon></view>
						</view>
					</uni-list-item>
					<uni-list-item :showLine="false" @click="makeCall(item.workShortNo)" :showArrow="false">
						<view class="tui-flex">
							<view class="tui-right  tui-col-4 om-label">工作手机短号</view>
							<view class="tui-center  tui-col-7 om-content">{{ item.workShortNo || '' }}</view>
							<view class="tui-right tui-col-1"><tui-icon color="green" :size="20" name="mobile"></tui-icon></view>
						</view>
					</uni-list-item>
				</uni-list>
			</uni-card>
			<om-white-space size="large" />
			<om-white-space size="large" />
			<uni-card style="border: none;border-radius: 2rpx;" is-full title="任职信息">
				<uni-list>
					<uni-list-item :showLine="false" @click="click(item.instShow, item.instname)">
						<view class="tui-flex">
							<view class="tui-right  tui-col-4 om-label">机构</view>
							<view class="tui-center  tui-col-8 om-content">{{ item.instname || '' }}</view>
						</view>
					</uni-list-item>
					<uni-list-item :showLine="false" @click="click(item.posShow, item.posname)">
						<view class="tui-flex">
							<view class="tui-right  tui-col-4 om-label">岗位</view>
							<view class="tui-center  tui-col-8 om-content">{{ item.posname || '' }}</view>
						</view>
					</uni-list-item>
				</uni-list>
			</uni-card>
			<view class="om-bottom">
				<picker @change="bindPickerChange" mode="selector" :value="index" :range="phones" style="width: 100%;">
					<button class="om-btn-color" style="width: 100%;color:#fff;" @click="makeCallClick">
						<tui-icon color="#fff" :size="28" name="voipphone"></tui-icon>
						<text class="padding-left text-white">拨打电话</text>
					</button>
				</picker>
			</view>
		</view>
		<!-- #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE -->
		<ot-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE"></ot-authpup>
		<!-- #endif -->
	</om-page>
</template>

<script>
export default {
	data() {
		return {
			logoColor: '',
			firstName: '',
			middleName: '',
			avatar: '',
			avatarSize: 'lg',
			avatarBgColor: '#63aa6f',
			item: {},
			index: 0,
			phones: [],
			pageTitle:"通讯详情",
			cellPhone: '',
		};
	},
	methods: {
		changeAuth(){
			
		},
		makeCall(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
			// #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
			setTimeout(()=>{
				this.$refs['authpup'].open();
			},500)
			// #endif
		},
		makeCallClick() {
			if (this.phones.length === 1) {
				uni.makePhoneCall({
					phoneNumber: this.phones[0]
				});
				// #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
				// #endif
			}
		},
		bindPickerChange: function(e) {
			this.index = e.target.value;
			uni.makePhoneCall({
				phoneNumber: this.phones[e.target.value]
			});
			// #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
			setTimeout(()=>{
				this.$refs['authpup'].open();
			},500)
			// #endif
		},
		click(e, title) {
			if(e && title){
				this.om.getPageInfo(e, title);
			}
		}
	},
	onLoad(options) {
		uni.setNavigationBarTitle({
			title: '通讯详情'
		});
		let _that = this;
		uni.getStorage({
			key: 'phoneInfo',
			success: function(res) {
				if (res.data) {
					let phoneInfo = res.data;
					_that.avatar = phoneInfo.avatar
					_that.logoColor = _that.CuColorList[phoneInfo.id % _that.CuColorList.length].name;
					_that.item = phoneInfo;
					_that.firstName = phoneInfo.username ? phoneInfo.username.substr(0, 1) : '';
					_that.middleName = _that.avatar?phoneInfo.username:(phoneInfo.username ? phoneInfo.username.substr(1, phoneInfo.username.length) : '');
					if (phoneInfo.mobile) {
						_that.phones.push(phoneInfo.mobile);
					}
					if (phoneInfo.shortNo) {
						_that.phones.push(phoneInfo.shortNo);
					}
					if (phoneInfo.workMobile) {
						_that.phones.push(phoneInfo.workMobile);
					}
					if (phoneInfo.workShortNo) {
						_that.phones.push(phoneInfo.workShortNo);
					}
				}
			}
		});
	}
};
</script>

<style></style>
